<%--
  Created by IntelliJ IDEA.
  User: Chokeremy
  Date: 2023/7/1
  Time: 16:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加出库</title>
    <script src="./js/vue.js"></script>
    <script src="./elementui/index.js" type="module"></script>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="./elementui/theme-chalk/index.css">
    <script src="//unpkg.com/element-ui@2.15.13/lib/index.js"></script>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" content="新增页面">
    </el-page-header>
    <el-alert v-if="showSuccessAlert" title="操作提示：" type="success" show-icon @close="showSuccessAlert = false">
        添加成功！
    </el-alert>
    <el-alert v-if="showErrorAlert" title="操作提示：" type="error" description="添加失败" show-icon
              @close="showSuccessAlert = false">
    </el-alert>

    <el-form :model="form" :rules="rules" ref="form" label-width="80px"
             style="width: 500px;margin: 0 auto;margin-top: 100px">
        <el-form-item label="出库药品" prop="medicineId">
            <el-select v-model="form.medicineId">
                <el-option v-for="item in medicineList"
                           :label="item.nAME"
                           :value="item.mEDICINE_ID"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="客户名称" prop="customer">
            <el-input v-model="form.customer"></el-input>
        </el-form-item>
        <el-form-item label="出货日期" prop="exportDate">
<%--            <el-input v-model="form.exportDate"></el-input>--%>
            <el-date-picker
                    v-model="form.exportDate"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="出货数量" prop="quantity">
<%--            <el-input v-model="form.quantity" @blur="handBlur"></el-input>--%>
    <el-input-number v-model="form.quantity" @change="handleChange" @blur="handBlur" :min="0" :max="100000" label="描述文字">    </el-input-number>
        </el-form-item>
        <el-form-item label="单价" prop="unitPrice">
<%--            <el-input v-model="form.unitPrice" @blur="handBlur2"></el-input>--%>
    <el-input-number v-model="form.unitPrice" @change="handleChange2" @blur="handBlur2" :precision="2" :step="0.1" :max="100000"></el-input-number>
        </el-form-item>
        <el-form-item label="总价" prop="totalPrice">
            <el-input v-model="form.totalPrice" readonly></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('form')">提交</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            form: {
                medicineId: '',
                customer: '',
                exportDate: '',
                quantity: '',
                unitPrice: '',
                totalPrice: '',
                status: 0,
            },
            rules: {
                medicines: [
                    {required: true, message: '请选择药品', trigger: 'change'},
                ],
                customer: [
                    {required: true, message: '请输入客户名称', trigger: 'blur'},
                    {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                ],
                exportDate: [
                    {required: true, message: '请输入出库日期', trigger: 'blur'}
                    // {pattern: /^\d+\-\d{1,2}\-\d{1,2}$/, message: '请输入正确的格式', trigger: 'blur'}
                ],
                quantity: [
                    {required: true, message: '请输入出货数量', trigger: 'blur'}
                    // {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                ],
                unitPrice: [
                    {required: true, message: '请输入单价', trigger: 'blur'},
                    // {pattern: /^\d{0,8}(\.\d{0,2})?$/, message: '请输入正确的格式', trigger: 'blur'}
                ]
                // totalPrice: [
                //     {required: true, message: '请输入总价', trigger: 'blur'},
                //     {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
                // ]
            },
            showSuccessAlert: false,
            showErrorAlert: false,
            medicineList: []
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: 'Export_infoServlet?tag=addSave',
                            type: 'post',
                            data: this.form,
                            success: function (data) {
                                if (data) {
                                    app.showSuccessAlert = true; // 显示成功提示框
                                } else {
                                    app.showErrorAlert = true;
                                }
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            goBack() {
                parent.vue.iframeUrl = 'export.jsp';
            },
            handBlur() {
                if (this.form.unitPrice !== "") {
                    this.form.totalPrice = Number(this.form.unitPrice * this.form.quantity).toFixed(2);
                }
            },
            handBlur2() {
                if (this.form.quantity !== "") {
                    this.form.totalPrice = Number(this.form.unitPrice * this.form.quantity).toFixed(2);
                }
            },
            handleChange(){
                if (this.form.unitPrice !== "") {
                    this.form.totalPrice = Number(this.form.unitPrice * this.form.quantity).toFixed(2);
                }
            },
            handleChange2(){
                if (this.form.quantity !== "") {
                    this.form.totalPrice = Number(this.form.unitPrice * this.form.quantity).toFixed(2);
                }
            },
            getMedicines(){
                $.ajax({
                    url:'medicine_info?tag=search',
                    type: 'get',
                    dataType:'json',
                    data:{
                        size: 10000
                    },
                    success: (res) => {
                        this.medicineList = res.list;console.log('供应商返回');console.log(res);
                    }
                })
            }
        },
        mounted(){
            this.getMedicines();
        }
    });
</script>
</html>
